<template>
	<view class="pagesWhite">
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @click="$tools.back(1)"></view>
				<view class="header-title">{{ getHeader(type) }}充值</view>
			</view> 
		</view> 
		
		<view class="recharge rechargeBgBox">
			<!--  1 微信  2支付宝 3 银行卡 -->
			<view class="recharge-list" v-for="(item,index) in payMethodConfig" :key="index" v-if="type == item.payMethod">
				<view class="recharge-list__item">
					<view class="label">{{ type == 3 ? '账户名' : ('收款'+type == 1 ? '微信' : '支付宝') }}</view>
					<view class="data data--active">{{ item.receiptName }}</view>
					<view class="copy" @tap.stop="$tools.copy(item.receiptName)">
						<image src="@/static/public/copy--active.png" mode=""></image>
					</view>
				</view>
				<view class="recharge-list__item">
					<view class="label">{{ type == 3 ? '银行卡号' : '收款人' }}</view>
					<view class="data data--active">{{ item.cardNo }}</view>
					<view class="copy" @tap.stop="$tools.copy(item.cardNo)">
						<image src="@/static/public/copy--active.png" mode=""></image>
					</view>
				</view>
				<view class="recharge-list__item" v-if="type == 3">
					<view class="label">支行银行</view>
					<view class="data">{{ item.branchBank }}</view>
				</view>
				<view class="qrCodeBox" v-else>
					<view class="qerCodeTxt">{{ type == 1 ? '微信' : '支付宝' }}收款二维码</view>
					<view class="codeImg" @tap.stop="getImg(item.receiptImage)">
						<!-- <image :src="qiniu.domain + item.receiptImage" mode=""></image> -->
						<image :src="item.receiptImage" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="">
				<view class="operateBox-formBox">
					<view class="operateBox-formBox-list-header">输入充值金额</view>
					<view class="operateBox-formBox-list operateBox-formBox-bo" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: num != '' }">
						<input type="text" placeholder="请输入输入充值金额" v-model="num" placeholder-class="inputStyle"
						@blur="blurInput(1)"
						@focus="focusInput(1)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('num')">
								<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="recharge-list__flex">
					<view class="headerTitle">支付凭证</view>
					<u-upload :fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							:multiple="true"
							:maxCount="3"
							width="172rpx"
							height="172rpx"
							:previewFullImage="true">
					<!-- <span class="txt">点击上传照片</span>	 -->
					<image src="@/static/public/addImg.png" mode="widthFix" style="width: 172rpx;height: 172rpx;"></image>
					</u-upload>
				</view>
				
			</view>
			
			<view class="initBtn" @tap.stop="$u.throttle(confirm,1500)">提交</view>
		</view>
			
	</view>
</template>

<script>
	import url from '@/common/js/url.js';
	export default {
		components:{
		},
		data(){
			return{
				type: '',
				num: '',
				fileList1: [],
				isFocus: null,
				eyeShow: '../../static/public/icon-eye-open.png',
				eyeHide: '../../static/public/icon-eye-close.png',
				eyeShowHideArray: [{ show: false }, { show: false }, { show: false }],
				img_idList: [],
				toggle: true,
				payMethodConfig: [],
				imgUrl: url.imgUrl,
				qiniu: {},
			}
		},
		computed: {
			getHeader(){
				return function(type){
					switch (type){
						case '1':
							return '微信';
							break;
						case '2':
							return '支付宝';
							break;
						case '3':
							return '银行卡';
							break;
					}
				}
			}
		},
		onLoad(options) {
			this.type = options.value1;
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getQiNiuToken();
				this.getPayMethodConfig();
			},
			confirm() {
				if (this.num == '' ) {
					return this.$tools.toast('请输入充值金额');
				}
				if (Number(this.num) < 0) {
					return this.$tools.toast('请输入正确的充值金额');
				}
				if (this.img_idList.length == 0) {
					return this.$tools.toast('请上传支付凭证');
				}
				if(this.toggle){
					this.toggle = false;
					var data = {};
					data['configId'] = this.type;
					data['voucher'] = (this.img_idList).toString();
					data['amount'] = this.num;
					console.log("data:",data);
					this.$Ajax('/api/money/cashRecharge',data,res => {
							if (res.code == 200) {
								this.$tools.toastBack("充值提交成功",1);
								this.img_idList = [];
								this.fileList1 = [];
								this.num = '';
								this.toggle = true;
							} 
						},err => {
							this.toggle = true;
						}
					)
				}
			},
			getPayMethodConfig(){
				var data = {};
				this.$Ajax('/api/money/payMethodConfig',data,res => {
						if (res.code == 200) {
							this.payMethodConfig = res.data;
						} 
					},err => {
					}, 'GET'
				)
			},
			// 删除图片 (封面图)
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.img_idList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				console.log(event);
				uni.showLoading({
				    title: "上传中",
				    mask: true
				});
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = that[`fileList${event.name}`].length
				lists.map((item) => {
					that[`fileList${event.name}`].push({
						...item,
					})
				})
				lists.forEach((item,index) => {
					let now_time = new Date().getTime();
					let token = that.$store.state.user.token;
					uni.uploadFile({
						url: url.webUrl+'/api/common/upload', 
						filePath: item.url,
						name: 'file',
						header: {
							'Authorization': token,
						},
						formData: {
							// 'key': now_time,
						},
						success: (uploadFileRes) => {
							let uploadImgUrl = JSON.parse(uploadFileRes.data).data;
							console.log("uploadImgUrl:",uploadImgUrl);
							that.img_idList.push(uploadImgUrl.url); 
							console.log("img_idList:",that.img_idList);
							uni.hideLoading();
						},
						fail: (error) => {
							console.log(error);
							uni.hideLoading();
						},
						complete: () => {
							setTimeout(function() {
								uni.hideLoading();
							}, 250);
						}
					})
				})
			},
			// 查看图片
			getImg(img){
				let that = this;
				uni.previewImage({
					urls:[img],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							console.log("data：",data);
							uni.downloadFile({
							    url: img, //下载资源的 url
							    success: (res) => {
									console.log("res：",res);
							       //下载成功之后的函数，可以拿到返回文件的本地临时路径
								   uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											return that.$tools.toast("保存成功");
										},
										fail: function() {
											return that.$tools.toast("保存失败");
										}
									});
							    }
							})
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/register';
	.operateBox-formBox{
		margin: 40rpx;
		.operateBox-formBox-list-header{
			margin-bottom: 26rpx;
		}
		.operateBox-formBox-list{
			background: rgba(216,216,216,0.08);
			border-radius: 10rpx;
			border: 2rpx solid #D8D8D8;
		}
	}
	
	.recharge{
		&-list{
			background: rgba(249, 252, 255, 1);
			&__item{
				@include flexLeft;
				margin: 0 40rpx;
				padding: 46rpx 0 40rpx;
				position: relative;
				border-bottom: 1px solid rgba(136, 136, 136, 0.09);
				&:nth-last-child(1){
					border: none;
				}
				.label{
					font-family: PingFang SC, PingFang SC;
					font-weight: normal;
					font-size: 28rpx;
					color: #525252;
					width: 22%;
					margin-right: 20rpx;
					text-align: left;
					overflow: hidden;
					white-space: nowrap;
				}
				.data{
					font-family: PingFang SC, PingFang SC;
					font-weight: normal;
					font-size: 28rpx;
					color: #131414;
					&--active{
						color: #1989F8;
					}
				}
				.copy{
					position: absolute;
					right: 0;
					image{
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
			&__flex{
				@include flexLeftColumn;
				margin: 30rpx 40rpx;
				position: relative;
				.headerTitle{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #131414;
					margin-bottom: 24rpx;
				}
				.txt{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #D8D8D8;
					text-align: center;
					position: absolute;
					bottom: 50rpx;
					left: 0;right: 0;
				}
			}
			.qrCodeBox{
				@include flexLeftColumn;
				margin: 30rpx 40rpx 0;
				padding-bottom: 62rpx;
				.qerCodeTxt{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #17181A;
				}
				.codeImg{
					width: 272rpx;
					height: 272rpx;
					margin: 20rpx auto 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.initBtn{
		width: calc(100vw - 34rpx - 34rpx);
		margin: 150rpx 34rpx;
		border-radius: 14rpx;
	}
	
	/deep/ .u-icon__icon{
		font-size: 46rpx !important;
		padding: 16rpx 2rpx 0 0;
	}
	/deep/.u-upload__deletable{
		width: 50rpx !important;
		height: 50rpx !important;
		// border-bottom-left-radius: 0 !important;
		border-radius: 50% !important;
		background: #989898 !important;
		top: 4rpx !important;
		right: 4rpx !important;
	}
	/deep/ .u-upload{
		position: relative;
	}
	/deep/ .u-upload__wrap__preview + view{
		position: relative;
	}
	
</style>